<template>
    <div id="roleList">
        <!--搜索框-->
        <div class="interview-header">
            <el-form ref="searchItem" :model="searchItem" :inline="true"  class="demo-form-inline">
                <el-form-item label="角色名" class="search-item" prop="name">
                    <el-input v-model="searchItem.name" placeholder="角色名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  @click="loadData(searchItem.name, pageNum, pageSize)" type="primary" icon="fa-search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button icon="fa-repeat" @click="resetForm('searchItem')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--列表-->
        <div class="table-box">
            <div class="export-btn">
                <el-button type="primary" @click="edit({}, 'new')">新建</el-button>
            </div>
            <el-table border :data="tableData">
                <el-table-column align="center" label="角色名" prop="name"></el-table-column>
                <el-table-column align="center" label="备注"></el-table-column>
                <el-table-column align="center" label="状态" prop="status"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template scope="scope">
                        <el-button size="small" @click="edit(scope.row, 'edit')" :disabled="scope.row.id === 1?true:false">修改</el-button>
                        <el-button type="danger" size="small" @click="deleteRow(scope.$index, scope.row)" :disabled="scope.row.id == 1?true:false">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div class="pageNav">
            <el-pagination
                :current-pageNum="pageNum"
                :page-sizes="[10, 30, 45]"
                :page-size="pageSize"
                layout="prev, pager, next, total, sizes"
                :total="total"
                @current-change="currentChange"
                @size-change="sizeChange"
                >
            </el-pagination>
        </div>
        <!--对话框-->
        <el-dialog :visible.sync="dialogNewRole" class="dialogNewRole" top="20%">
            <template slot="title"><span>{{this.editType}}</span></template>
            <el-form label-width="90px" :model="dialogData" class="dialogForm">
                <el-form-item label="角色名" required prop="name">
                    <el-input v-model="dialogData.name"></el-input>
                </el-form-item>
                <el-form-item class="a-btn">
                    <el-button type="primary" @click="saveRole(editType)">保 存</el-button>
                    <el-button @click="dialogNewRole = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import axo from "@/assets/js/axo";
    export default {
        name: "roleList",
        data () {
            return {
                isDisabled: "",
                editType: "新建",
                dialogData: {
                },
                searchItem: {
                    name: ''
                },
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                dialogNewRole: false,
                isShowBtn: true
            };
        },
        methods: {
            test (a) {
                console.log(a);
            },
            currentChange (val) {
                this.pageNum = val;
                console.log(`当前页: ${val}`);
                this.loadData(this.searchItem.name, val, this.pageSize);
            },
            sizeChange (val) {
                this.pageSize = val;
                this.loadData(this.searchItem.name, this.pageNum, val);
                console.log(`每页 ${val} 条`,';总数：', this.total);
            },
            saveRole (type) {
                let url = "";
                let message = "";
                let dialogData = this.dialogData;
                let reqData = {};
                if(type === "新建"){
                    url = "/api-sys/role/add";
                    message ="新建成功";
                    reqData = {
                        "name": dialogData.name
                    };
                }
                if(type === "修改"){
                    url = "/api-sys/role/update";
                    message ="修改成功";
                    reqData = {
                        "roleNo": dialogData.roleNo,
                        "name": dialogData.name
                    };
                }
                let _this = this;
                if(!dialogData.name){
                    this.$message({
                        showClose: true,
                        message: "请完整填写信息",
                        type: 'error',
                        duration: 1200
                    });
                }else{
                    axo({
                        method: 'post',
                        url: url,
                        data: {
                            "platformNo": "1",
                            "body": reqData
                        }
                    }).then((res) => {
                        if(res.data.state.code === "200"){
                            this.$message({
                                message: message,
                                type: 'success',
                                duration: 800,
                                onClose: () => {
                                    // 刷新页面，更新其他页面被缓存的数据
                                    window.location.reload();
                                    // this.$destroy();
                                    // console.log(this);
                                }
                            });
                            _this.dialogNewRole = false;
                            _this.loadData(this.searchItem.name, this.pageNum, this.pageSize);
                        }else{
                            this.$message({
                                message: res.data.state.message,
                                type: 'error',
                                duration: 800
                            });
                        }
                        console.log(res);
                    });
                }
            },
            edit (data, editType) {
                if(editType === "new"){
                    this.editType = "新建";
                }
                if(editType === "edit"){
                    this.editType = "修改";
                }
                this.dialogNewRole = !this.dialogNewRole;
                let obj = {};
                obj.name = data.name?data.name:"";
                obj.roleNo = data.roleNo?data.roleNo:"";
                this.dialogData = obj;
            },
            resetForm (item) {
                this.$refs[item].resetFields();
                this.loadData(this.searchItem.name, this.pageNum, this.pageSize);
            },
            deleteRow (index, rows) {
                console.log(index, rows);
                let _this = this;
                this.$confirm("确定删除吗？删除后将无法恢复", "删除", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    axo({
                        method: 'post',
                        url: "/api-sys/role/del",
                        data: {
                            "platformNo": "1",
                            "body": {
                                "roleNo": rows.roleNo
                            }
                        }
                    }).then((res) => {
                        if(res.data.state.code === "200"){
                            _this.dialogNewRole = false;
                            _this.loadData(this.searchItem.name, this.pageNum, this.pageSize);
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                        }
                        console.log(res);
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            },
            async loadData (name='', pageNum=1, pageSize=10) {
                await axo({
                    method: 'post',
                    url: '/api-sys/role/queryRoleList',
                    data: {
                        "platformNo": "1",
                        "body": {
                            name: name,
                            pageNum: pageNum,
                            pageSize: pageSize
                        }
                    }
                }).then((res) => {
                    let ciphertext = JSON.parse(res.data.ciphertext);
                    console.log(ciphertext);
                    this.tableData = ciphertext.list;
                    this.total = ciphertext.total;
                    // console.log(this.tableData);
                    this.tableData = this.tableData.map((ele,i) => {
                        if(ele.status === 1){
                            ele.status = "有效";
                        }
                        if(ele.status === 0){
                            ele.status = "无效";
                        }
                        return ele;
                    });
                }).catch((error) => {
                    console.log("error:", error);
                });
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadData();
            });
        }
    };
</script>

<style lang="scss" scoped="scoped">
    #roleList{
        .interview-header{
            border: 1px solid #eee;
            margin:20px;
            padding:22px 0 0 20px;
            min-width: 1200px;
            box-sizing: border-box;
            .search-in{
                .search-item{
                    margin-right: 30px;
                }
            }
        }
        .table-box{
            border: 1px solid #eee;
            margin:20px;
            min-width: 1200px;
            .add-btn{
                margin: 20px;
                .el-icon-plus{
                    font-size:12px;
                }
            }
            .export-btn{
                padding: 15px;
            }
        }
        .el-table .cell, .el-table th>div{
            padding:5px;
            white-space: nowrap;
        }
        .pageNav{
            text-align: right;
            padding:0 10px;
            .el-pagination{
                padding:0;
            }
        }
        .dialogNewRole{
            .dialogForm{
                width: 300px;
                display: block;
                margin: 0 auto;
                padding-right: 90px;
            }
            .a-btn{
                text-align: center;
            }
        }
    }
</style>
